<!-- 详情页（三级页面）水平左侧Tab，上滚时Tab固定 -->
<template>
  <div class="horizontal-tab">

    <div class="breadcrumb">
      您当前的位置：
      <span>畅游鰼国 > </span>&nbsp;
      <span  @click="toPreviousRoute" style="color: #39ADFF; cursor: default">{{this.$route.params.title}}&nbsp;></span>&nbsp;
      <span>详情</span>
    </div>

    <div class="tab-item" :class="{activeFixed: activeShow}" v-if="hotelData">
      <div class="profile">
        <img class="thumb" :src="hotelData.thumbnailId"/>
        <div class="info">
          <h2>
            {{ hotelData.name }}
            <a class="info-qunar" style="cursor: default" :href="hotelData.qunarUrl" target="_blank">上去哪儿订购</a>
            <a class="info-ctrip" style="cursor: default" :href="hotelData.ctripUrl" tabindex="_blank">上携程订购</a>
          </h2>
          <p>
            <i class="icon iconfont icon-jiage" style="font-size: 16px;"></i>
            价格：<label class="price-label">￥{{ hotelData.floorPrice}}</label> 起
          </p>
          <p>
            <i class="icon iconfont icon-6pingfen" style="font-size: 16px;"></i>
            评分：
            <label v-if="hotelData.commentScore !== null" v-for="item in hotelData.commentScore" :key="item">
              <i class="icon iconfont icon-6pingfen" style="font-size: 16px; color: #00ceb9;"></i>
            </label>
          </p>
          <p>
            <i class="icon iconfont icon-pingfen" style="font-size: 16px;"></i>
            酒店星级：
            <label v-if="hotelData.starRate" v-for="item in parseInt(hotelData.starRate)" :key="item">
              <i class="icon iconfont icon-pingfen" style="font-size: 16px; color: #00ceb9;"></i>
            </label>
          </p>
          <p>
            <i class="icon iconfont icon-dianhua3" style="font-size: 16px;"></i>
            联系电话：<label>{{ hotelData.phone }}</label>
          </p>
          <p>
            <i class="icon iconfont icon-dizhi" style="font-size: 16px;"></i>
            地址：<label>{{ hotelData.address }}</label>
          </p>
          <p class="description-last">
            <i class="icon iconfont icon-gongsijianjie" style="font-size: 16px;"></i>
            简介：<label style="lineHeight:2;">{{ hotelData.description}}{{ hotelData.description}}{{ hotelData.description}}</label>

          </p>
        </div>
      </div>

      <!-- 酒店图集 -->
      <ul class="hotel-images">
        <li class="hotel-images-li" v-for="item in hotelImages" :key="item.id">
          <img class="hotel-image" v-lazy="item.imageUrl"/>
        </li>
      </ul>

      <!-- 酒店详细信息 -->
      <div class="hotel-detail">

        <h4 class="detail-title">联系方式</h4>
        <p>电话 {{ hotelData.phone }}</p>
        <p>传真 {{ hotelData.fax }}</p>

        <h4>基本信息</h4>
        <p>开业时间 {{ hotelData.establishmentDate }}</p>
        <p>最后一次装修时间{{ hotelData.renovationDate }}</p>

        <p class="divider"></p>

        <h4>酒店介绍</h4>
        <p>{{ hotelData.introEditor}}</p>

        <p class="divider"></p>

        <h4>酒店服务</h4>
        <p>{{ hotelData.generalAmenities }}</p>

        <p class="divider"></p>

        <h4>房间设施</h4>
        <p>{{hotelData.roomAmenities}}</p>

        <p class="divider"></p>

        <h4>会议室设备</h4>
        <p>{{hotelData.conferenceAmenities}}</p>

        <p class="divider"></p>

        <h4>休闲设施</h4>
        <p>{{hotelData.recreationAmenities}}</p>

        <p class="divider"></p>

        <h4>是否支持接机</h4>
        <p>{{hotelData.airportPickUpService}}</p>

        <p class="divider"></p>

        <h4>餐饮设施</h4>
        <p>{{hotelData.diningAmenities}}</p>

      </div>
      <!-- 地图显示酒店所在位置 -->
      <div id="mapContainer" style="width:100%;height:500px"></div>

    </div>
  </div>
</template>

<script>
import guliDose from '_as/guli-desc.png'
import scrollAnimation from '@/api/scrollAnimation.js'

export default {
  name: 'HotelDetail',
  data () {
    return {
      guliDose,
      bgStyle: false,
      numShow: '1',
      numShowClick: '1',
      activeShow: false,
      scrollLog: '',
      map: null,
      marker: null,
      infoWindow: null,
      longitude: 0,
      latitude: 0,
      hotelData: null,
      hotelImages: []
    }
  },
  components: {},
  computed: {},
  beforeCreate () {},
  created () {
    this.getHotelDataById(this.$route.params.id)
    window.addEventListener('scroll', this.menu)
    this.getHotelImages(this.$route.params.id)
  },
  mounted () {
    const needScrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset || 0
    scrollAnimation(needScrollTop, 0)
  },
  methods: {
    // 根据ID拉取酒店数据
    getHotelDataById (id) {
      this.$http.get('/v1/hotel/' + id).then(res => {
        this.hotelData = res
        this.$nextTick(() => {
          this._initAmap(parseFloat(this.hotelData.longitude), parseFloat(this.hotelData.latitude), this.hotelData.name)
        })
      }).catch(err => {
        console.error(err)
      })
    },
    // 获取酒店图集
    getHotelImages (hotelId) {
      this.$http.get('/v1/hotelImage/' + hotelId).then(res => {
        this.hotelImages = res
      }).catch(err => {
        console.log(err)
      })
    },
    /* eslint-disable */
    _initAmap (longitude, latitude, name) {
      this.map = new AMap.Map('mapContainer', {
        center: [longitude, latitude],
        resizeEnable: true,
        zoom: 14
      })
      this.marker = new AMap.Marker({
        position: [longitude, latitude],
        title: name
      })
      // this.map.add(this.marker)
      this.marker.setMap(this.map)
    },
    /* eslint-disable */
    // 点击面包屑，路由回滚上级路由
    toPreviousRoute () {
      this.$router.push('/sightseeing_tour_secondary/2-2')
    }
  }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
@import '~@/assets/stylus/variable.styl'
@import '~@/assets/stylus/mixins.styl'
.horizontal-tab {
  background #f9f9f9
}
.breadcrumb {
  padding 20px 0 20px 15%
  display flex
  align-items center
  margin-bottom 20px
  box-shadow 0 0 10px 2px #ddd
}
.tab-item {
  width 1000px
  margin 0 auto
  background white
  text-align left
  .profile {
    display flex
    align-items center
    border 1px solid #f3f3f3
    padding 10px
    .price-label {
      font-size 20px
      color #00ceb9
    }
    .thumb {
      width 400px
      height 300px
      border 1px solid #f3f3f3
    }
    .info {
      margin-left 20px
      h2 {
        margin-bottom 20px
        a {
          font-size 15px
          margin-left 20px
          margin-right 20px
          &:hover {
            color: #00ceb9
            text-decoration underline
          }
        }
        .info-qunar {
          color #888888
        }
        .info-ctrip {
          color #888888
        }
      }
      p {
        margin 10px 0
        color #666666
        font-size 14px
        label {
          color #888888
        }
      }
      .description-last {
        no-wrap-n(3)
      }
      .price-label {
        color #00ceb9
      }
    }
  }
  .hotel-images {
    height 200px
    margin-top 20px
    padding 10px
    border 1px solid #f3f3f3
    display flex
    overflow-x scroll
    overflow-y hidden
    .hotel-images-li {
      width 300px
      height 200px
      display inline-block
      .hotel-image {
        width 300px
        height 200px
        margin-right 10px
        border 1px solid #f3f3f3
        &:hover {
          border 1px solid #00ceb9
        }
      }
    }
  }
  .hotel-detail {
    width 95%
    padding 20px 25px 10px
    // border 1px solid #f3f3f3
    h4 {
      padding 10px 0
    }
    p {
      line-height 2.5
      text-indent 20px
      color #999
      font-size 14px
    }
    .divider {
      width 100%
      height 0.5px
      background rgba(0,0,0,0.1)
      margin-top 10px
      margin-bottom 10px
    }
  }
}
</style>
